<template>
  <div class="wrapper">
    <catalog></catalog>
    <example>
      <template v-slot:title>
        基本用法
      </template>
      <l-button>按钮</l-button>
      <template v-slot:code>
        {{buttonExample.example1}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        按钮颜色
      </template>
      <l-button>主要按钮</l-button>
      <l-button status="info">Info按钮</l-button>
      <l-button status="success">成功按钮</l-button>
      <l-button status="danger">危险按钮</l-button>
      <l-button status="warning">警告按钮</l-button>
      <template v-slot:code>
        {{buttonExample.example2}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        按钮尺寸
      </template>
      <l-button size="xsmall">超小号</l-button>
      <l-button size="small">小号</l-button>
      <l-button>默认尺寸</l-button>
      <l-button size="large">大号</l-button>
      <l-button size="xlarge">超大号</l-button>
      <template v-slot:code>
        {{buttonExample.example3}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        按钮外框
      </template>
      <l-button outline>有外框</l-button>
      <l-button>默认无外框</l-button>
      <template v-slot:code>
        {{buttonExample.example4}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        点击按钮事件
      </template>
      <l-button outline @click="clickButton">狠狠的点我</l-button>
      <template v-slot:code>
        {{buttonExample.example5}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        按钮组
      </template>
      <l-button-group>
        <l-button outline status="primary" @click="clickButton">狠狠的点我</l-button>
        <l-button outline status="danger" @click="clickButton">狠狠的点我</l-button>
        <l-button outline status="info" @click="clickButton">狠狠的点我</l-button>
        <l-button outline status="success" @click="clickButton">狠狠的点我</l-button>
        <l-button outline status="warning" @click="clickButton">狠狠的点我</l-button>
      </l-button-group>
      <l-button-group style="margin-top: 15px;">
        <l-button status="primary" @click="clickButton">狠狠的点我</l-button>
        <l-button status="danger" @click="clickButton">狠狠的点我</l-button>
        <l-button status="info" @click="clickButton">狠狠的点我</l-button>
        <l-button status="success" @click="clickButton">狠狠的点我</l-button>
        <l-button status="warning" @click="clickButton">狠狠的点我</l-button>
      </l-button-group>
      <template v-slot:code>
        {{buttonExample.example6}}
      </template>
    </example>
  </div>
</template>

<script>
import Catalog from '../components/Catalog';
import Example from '../components/Example';
import ButtonExample from './Button-Example';

export default {
  name: 'Button',
  components: {
    Catalog,
    Example
  },
  methods: {
    clickButton () {
      alert('让你点，你就点？');
    }
  },
  data () {
    return {
      buttonExample: ButtonExample
    };
  }
};
</script>
